<template>
  <p style="color:rgba(121, 121, 121, 0.4);font-size: 12px">包裹管理 / 寄收件管理 / 所有件</p>
  <el-card>
    <p style="font-size: 20px;font-weight: bolder">寄收件</p>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input placeholder="请输入寄件单号/手机号/姓名" style="width: 300px">
          <template #append>
            <el-button :icon="Search"/>
          </template>
        </el-input>
      </el-col>
      <el-col :span="14">
        <div style="margin: 8px 0">
          <el-icon><Search /></el-icon>
          <a href="" style="text-decoration: none;color:rgba(121, 121, 121, 0.4);font-size: 12px">高级搜索</a>
        </div>
      </el-col>
      <el-col :span="4">
        <div>
          <span>5/400</span>
          <el-button>上页</el-button>
          <el-button>下页</el-button>
        </div>
      </el-col>
    </el-row>
    <el-table :data="contentArr">
      <el-table-column prop="orderNum" label="寄件单号" width="150px">
        <template #default="scope">
          <a href="http://localhost:8080/paymentDetailsSuccess">{{scope.row.orderNum}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="cell" label="寄件地址"></el-table-column>
      <el-table-column prop="expressman" label="寄件人"></el-table-column>
      <el-table-column prop="expressmanTel" label="寄件人电话" width="150px"></el-table-column>
      <el-table-column prop="consignee" label="收件人"></el-table-column>
      <el-table-column prop="consigneeTel" label="收件人电话"></el-table-column>
      <el-table-column prop="deliveryTime" label="收件时间"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="operation" label="操作">
        <el-button text @click="dialogTableVisible = true">
          <p>查看详情</p>
        </el-button>

        <el-dialog v-model="dialogTableVisible" title={{status}}>
          <el-table :data="gridData">
            <el-table-column property="createTime" label="创建订单时间" />
            <el-table-column property="startTime" label="开始派件时间"  />
            <el-table-column property="isExpress" label="是否寄件成功" />
            <el-table-column property="statusCode" label="寄件状态" />
            <el-table-column property="isSuccess" label="是否收件完成" />
          </el-table>
        </el-dialog>

        <el-button text @click="dialogVisible = true">
          <p>重发收件码</p>
        </el-button>

        <el-button text @click="dialogVisible1 = true">
          <p>催促顾客收件</p>
        </el-button>

        <el-dialog
            v-model="dialogVisible"
            title="提示"
            width="30%"
            :before-close="handleClose"
        >
          <span>您确定要向用户136*****678重发收货码吗?</span>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </span>
          </template>
        </el-dialog>

        <el-dialog
            v-model="dialogVisible1"
            title="提示"
            width="30%"
            :before-close="handleClose"
        >
          <span>您确定要向用户136*****678发送催促收件短信吗?</span>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false">
          确定
        </el-button>
      </span>
          </template>
        </el-dialog>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="10">
        <P>共{{page-size}}条</P>
      </el-col>
      <el-col :span="14">
        <div style="margin: 20px 0px 20px 0">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[5,10,15,20]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="120"
              :pager-count="pagerCount"
          />
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import { reactive, ref } from 'vue';

const dialogTableVisible = ref(false)

const gridData = [
  {"createTime":"2011-12-09 20:21:11",
    "startTime":"2011-12-09 23:21:11",
    "isExpress":"未派件",
    "statusCode":"待寄件",
    "isSuccess":"否"
  }
]

const dialogVisible = ref(false)

const dialogVisible1 = ref(false)

const handleClose = () => {
  ElMessageBox.confirm('您确定要关掉提示吗?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}


const contentArr=ref([
  {"orderNum":"8190113162217023",
    "cell":"MolinboxC903"+"\n"+"菲律宾马尼拉帕赛塔夫特大街市政厅大堂\n" +
        "\n" +
        "3行4列\n" +
        "\n" +
        "#456789",
    "expressman":"李四",
    "expressmanTel":"13386869595",
    "consignee":"张三",
    "consigneeTel":"13387879999",
    "deliveryTime":"2023-10-26 19:00:00",
    "status":"待收件",
    }
])
const currentPage = ref(40);
const pageSize = ref(20);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const pagerCount = ref(6);
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.el-button--text {
  margin-right: 15px;
}

</style>